<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>佛学小词典</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-icons-1.5.0/bootstrap-icons.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-5.0.2/css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/customer.css' %}">

</head>

<body>


<section class="header">
    <nav class="navbar navbar-expand-lg navbar-dark  sticky-top ">
        <div class="container">
            {#            <a class="navbar-brand" href="#">佛学小词典</a>#}

            {#            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" style="border:none;"#}
            {#                    data-bs-target="#navbarcontent" aria-controls="navbarcontent"#}
            {#                    aria-expanded="false" aria-label="触发导航栏">#}
            {#              <i class=" bi bi-filter-left buddha_icon" ></i>#}
            {#            </button>#}

            <button class="navbar-toggler" type="button" style="border:none;"
                    data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample"
                    aria-expanded="false" aria-label="触发侧边栏">
                <i class=" bi bi-filter-left buddha_icon"></i>
            </button>


            <div class="collapse navbar-collapse justify-content-end" id="navbarcontent">
                <ul class="navbar-nav align-items-center">
                    <li class="nav-item px-3 fw-bold">
                        <a class="nav-link active" aria-current="page" href="#">首页</a>
                    </li>
                    <li class="nav-item px-3 fw-bold">
                        <a class="nav-link" href="#">心理学发展</a>
                    </li>
                     <li class="nav-item px-3 fw-bold">
                        <a class="nav-link" href="#">心理学大师</a>
                    </li>
                     <li class="nav-item px-3 fw-bold">
                        <a class="nav-link" href="#">心理学组织</a>
                    </li>
                     <li class="nav-item px-3 fw-bold">
                        <a class="nav-link" href="#">关于我们</a>
                    </li>
                </ul>

            </div>
        </div>
    </nav>
</section>
<section>
    <div class="offcanvas offcanvas-start bg-mobile" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasExampleLabel"></h5>
            <button type="button" class="btn-close btn-close-white text-reset close-buddha" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <!-- 导航栏 -->
            <ul class="navbar-nav align-items-center navbar-light">
                <li class="nav-item px-3 py-1 nav-item-buddha">
                    <a class="nav-link active" aria-current="page" href="#">首页</a>
                </li>
                <li class="nav-item px-3 py-1 nav-item-buddha">
                    <a class="nav-link" href="#">关于我们</a>
                </li>
            </ul>
             <!-- 导航栏 -->

        </div>
    </div>
</section>


<section class="container">
    内容区域
    <i class="bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i>
</section>

<script src="{% static 'plugins/bootstrap-5.0.2/js/bootstrap.bundle.min.js' %}"></script>

</body>
</html>